
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			table {
				background-color: skyblue;
				color: white;
				margin: 0 AUTO;
			}
			
			td {
				height: 100px;
				width: 100px;
				text-align: center;

			}
			
			td:hover {
				color: #999999;
				background-color: royalblue;
				cursor: pointer;
				font-size: 40px;
				color: black;
			}
			
			td.last {
				color: #black;
				background-color: gainsboro;
			}
			td.next {
				color: #black;
				background-color: red;
			}td.tian {
				color: #black;
				background-color:skyblue;
			}
			
			td.next:hover {
				color: red;
				background-color: burlywood;
				cursor: pointer;
			}
			th{line-height: 50px;}
		</style>
	</head>

	<body>
		
		<div id="box"></div>
		<script type="text/javascript">
			/**
			 * 判断是否闰年
			 * @param {Object} nian 输入的年
			 */
			function isrun(nian) {
				if(nian % 4 == 0 && nian % 100 != 0 || nian % 400 == 0) {
					return true
				} else {
					return false
				}
			}

			/**
			 * 根据年和月判断当前月多少天
			 * @param {Object} nian 当前年
			 * @param {Object} yue  当前月
			 * @param {Object} day 这个月有多少天
			 */
			function sumnianyueday(nian, yue) {
				var day = 0;
				if(yue == 2) {
					day = isrun(nian) ? 29 : 28;
					//					if(nian % 4 == 0 && nian % 100 != 0 || nian%400 == 0) {
					//						day = 29;
					//					} else {
					//						day = 28;
					//					}
				} else if(yue == 1 || yue == 3 || yue == 5 || yue == 7 || yue == 8 || yue == 10 || yue == 12) {
					day = 31;
				} else {
					day = 30;
				}
				return day;
			}
			//			var day = sumnianyueday(2018, 5);
			//			console.log(day);

			/***
			 * 当前年上一月多少天
			 * @param {Object} nian 当前年
			 * @param {Object} ly 上一月
			 */
			function sumnianlastyueday(nian, ly) {
				var lastday = 0;
				if(ly == 2) {
					lastday = isrun(nian) ? 29 : 28;
					//					if(nian % 4 == 0 && nian % 100 != 0 || nian%400 == 0) {
					//						lastday = 29;
					//					} else {
					//						lastday = 28;
					//					}
				} else if(ly == 1 || ly == 3 || ly == 5 || ly == 7 || ly == 8 || ly == 10 || ly == 0) {
					lastday = 31;
				} else {
					lastday = 30;
				}
				return lastday;
			}

			/**
			 * 判断1900年到nian上一年总共有多少天
			 * @param {Object} nian 当前年
			 */
			function lsunmnianyueday(nian) {
				var sumday = 0;
				for(n = 1900; n < nian; n++) {
					sumday += isrun(n) ? 366 : 365;
				}
				return sumday;
			}
			//			var sumday = lsunmnianyueday(2008);
			//			console.log(sumday)

			/***
			 * 判断当nian年到当yue月上一月最后一天有多少天
			 * @param {Object} nian 当前年
			 * @param {Object} yue   当前月
			 */
			function lsumyueday(nian, yue) {
				var sumday = 0
				for(y = 1; y < yue; y++) {
					sumday += sumnianyueday(nian, y); //判断月的天数
					//            	var day=sumnianyueday(nian,y); 
					//            	sumday+=day;                  
				}
				return sumday;
			}
			//			            var sumday = lsumyueday(2008,2);如2月（本月不加）
			//						console.log(sumday)                31天

			/***
			 * 判断nian年yue月1号周几
			 * @param {Object} nian  当前年
			 * @param {Object} yue   当前月
			 */

			function xinqi(nian, yue) {
				var sumday = lsunmnianyueday(nian); //1900年到nian有多少天
				sumday += lsumyueday(nian, yue) //判断当nian年到当yue月上一月最后一天有多少天
				return(sumday + 1) % 7 //星期几
			}

			//打印日历
			function wannianli(nian, yue) {
				var html='';
				html+='<table cellpadding="0" cellspacing="0">'
				var day = sumnianyueday(nian, yue);
				html+='<tr><th colspan="7">' + nian + '年' + yue + '月' + '总共' + day + '天' + '</th></tr>'
				html+='<tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>'
				html+='<tr>'
				var ly = yue - 1;
				var lastday = sumnianlastyueday(nian, ly);
				var day1 = xinqi(nian, yue);
				for(var i = (lastday - day1 + 1); i <= lastday; i++) {
					html+='<td class="last">' + i + '</td>'
				}

				for(var i = 1; i <= day; i++) {
					if((i + day1 - 1) % 7 == 0 && i != 1) {
						html+='<tr>'
					}
					html+='<td class="tian">' + i + '</td>'

					if((i + day1 - 1) % 7 == 6) {
						html+='</tr>'
					}
				}
				var day31 = (day1 + day - 1) % 7
				for(var a = 1; a < 7 - day31; a++) {
					html+='<td class="next">' + a + '</td>' 
					if(a == 6 - day31) {
						html+='</tr>'
					}
				}
				html+='</table>'
				document.getElementById('box').innerHTML =html;
			}
			
			var rili = wannianli(2018, 2);

			var nian = 2018;
			var yue = 2;

			window.onkeydown = function(event) {
				if(event.keyCode == 37) {
					//左键
					nian--;
				} else if(event.keyCode == 38) {
					//上键
					yue++;
					if(yue == 13) {
						yue = 1;
						nian++;

					}
				} else if(event.keyCode == 39) {
					//右键
					nian++;
				} else if(event.keyCode == 40) {
					//下键
					yue--;
					if(yue == 0) {
						yue = 12;
						nian--;
					}
				}
				wannianli(nian, yue);
			}
		</script>
	</body>

</html>